<template>
    <div class="notice flexbox-h align-c" v-if="notice">
        <i class="icon-notice"></i>
        <a :href="notice.link" target="_blank" class="notice-content tl flex1" v-if="notice.link.includes('http')" :to="notice.link"><div class="name" ref="textMove">{{ notice.title }}</div></a>
        <nuxt-link class="notice-content tl flex1" v-else :to="notice.link"><div class="name" ref="textMove">{{ notice.title }}</div></nuxt-link>
    </div>
</template>

<script>
export default {
    computed: {
        notice () {
            return this.$store.state.websiteConfig.notice
        }
    },
    created () {
        this.textMove()
    },
    methods: {
        textMove () {
            let oCon = this.$refs.textMove
            if (oCon && oCon !== null) {
                let _move = null
                let step = -1
                _move = setInterval(() => {
                    this.autoRoll(oCon, step)
                }, 60)
                if (oCon.textContent.length <= 22) {
                    clearInterval(_move)
                } else {
                    oCon.textContent += '' + oCon.textContent
                    this.autoRoll(oCon, step)
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.notice {
    border-radius: @border-radius;
    overflow: hidden;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.6);
}
</style>
